<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo{
            width: 100px;
            height: 100px;
            padding: 10px;
            border: 2px solid orange;
            background-color: red;
            position: relative;
        }
        .innerDemo{
            width: 50px;
            height: 50px;
            position: absolute;
            background-color: #fff;
            left: 25px;
            top: 25px;
        }

    </style>
</head>
<body>
<div class="demo">
    <div class="innerDemo"></div>
</div>
<script src="../jquery-1.12.4.js"></script>
<script>
    $(function () {
       var demo = $(".demo");
        console.log(demo.width());//width的值
        console.log(demo.innerWidth());//width+padding的值
        console.log(demo.outerWidth());//width+padding+border的值

        console.log($(".innerDemo").offset());//获取元素相对于document的位置
        console.log($(".innerDemo").position());//获取元素相对于父级元素的位置
        var innerObj = $(".innerDemo");
        //事件绑定
        innerObj.on("click",function () {
            //事件有：click,change,mouseenter.....
            console.log("给自己绑定事件")
        });
        //给demo下面的innerDemo绑定点击事件
        demo.on("click",".innerDemo",function () {
            console.log("innerDemo被点击了")
        });
        demo.on("click",function () {
            //off解除绑定事件
            demo.off("mouseover");
            //trigger触发事件
            innerObj.trigger("click");
        })
    });
</script>
</body>
</html>